{% extends 'globalPage.html' %}
<title>{% block title %}云学习平台{% endblock %}</title>
{% block body %}
    <nav class="navbar navbar-default">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" style="padding: 0;" href="{% url 'home' %}"><img style="height: 50px;"
                                                                                         src="/static/image/logo.png"
                                                                                         alt="Band"></a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="{% url 'home' %}">首页</a></li>
                    <li><a href="{% url 'courses' 'firstGrade' 'allCourses' 1 %}">全部课程</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="{% url 'login' %}">登陆/注册</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="container">
        <div class="panel-body"
             style="width: 538px; height: 654px; margin: 50px auto; background: white; border-radius: 2%">
            <div style="width: 200px; height: 200px; margin: 20px auto 0;">
                <img style="height: 200px;" src="/static/image/logo.png" alt="Band">
            </div>
            <div style="width: 190px; height: 40px; margin: 0 auto 60px; color: #73B11A">
                <h1 style="margin: 0">云学习.注册</h1>
            </div>
            <form action="" method="POST">
                {% csrf_token %}
                <div class="input-group input-group-lg"
                     style="position: relative;display: flex;align-items: center;justify-content: center; margin: 25px 100px">
                    <input id="phoneNum" type="text" style="border-radius: 5px;" class="form-control"
                           placeholder="Phone" name="username" aria-describedby="sizing-addon1">
                </div>
                <div class="input-group input-group-lg"
                     style="position: relative;display: flex;align-items: center;justify-content: center; margin: 25px 100px">
                    <input id="phoneCode" type="text" class="form-control" placeholder="手机验证码">

                    <button id="getCodes" class="btn btn-default form-control" type="button" onclick="getCode()">获取验证码
                    </button>

                </div><!-- /input-group -->
                <div class="input-group input-group-lg"
                     style="position: relative;display: flex;align-items: center;justify-content: center; border-radius: 2%; margin: 25px 100px">
                    <input id="register_password" type="password" style="border-radius: 5px;" class="form-control"
                           placeholder="Password" name="password" aria-describedby="sizing-addon1">
                </div>
                <div class="input-group input-group-lg"
                     style="position: relative;display: flex;align-items: center;justify-content: center; border-radius: 2px; margin: 25px 100px">
                    <input id="register" type="button" style="border-radius: 5px;" class="form-control btn btn-info"
                           aria-describedby="sizing-addon1" onclick="toRegister()" value="完成注册">
                </div>
            </form>
            <div id="registerFail">

            </div>


        </div>
    </div>
{% endblock %}
{% block jsOfPage %}
    <script>
        // 发送验证码
        function getCode() {
            var phoneNum = $("#phoneNum").val();
            if (/^1[34578]\d{9}$/.test(phoneNum)) {
                $.ajax({
                    type: "POST",
                    url: "{% url 'getCode' %}",
                    data: {
                        "csrfmiddlewaretoken": $('input[name="csrfmiddlewaretoken"]').val(),
                        "phoneNum": phoneNum
                    },
                    success: function (data) {
                        $("#phoneCode").attr("data-code", data);
                        var count = 60;
                        countDown(count);
                    }
                })
            } else {
                alert("请输入正确的手机号！")
            }

        }

        function countDown(count) {
            var time = setInterval(function () {
                if (count > 0) {
                    $("#getCodes").text("重新发送" + count).attr("disabled", true);
                } else {
                    clearInterval(time);
                    $("#getCodes").text("获取验证码").attr("disabled", false);
                }
                count--;
            }, 1000)
        }

        // 完成注册
        function toRegister() {
            var username = $("#phoneNum").val(),
                password = $("#register_password").val(),
                data_code = $("#phoneCode").attr("data-code"),
                phone_code = $("#phoneCode").val();
            if (data_code === phone_code) {
                $.ajax({
                    url: "{% url 'register' %}",
                    type: "POST",
                    data: {
                        "csrfmiddlewaretoken": $('input[name="csrfmiddlewaretoken"]').val(),
                        "username": username,
                        "password": password
                    },
                    success: function (data) {
                        window.location.href = "{% url 'register' %}";
                    }
                })
            } else {
                alert("请输入正确的验证码")
            }
        }
    </script>
{% endblock %}